<template>
  <div class="materials-box padlr320 mar-t60" v-if="materialsList.length">
      <div class="block-tit ">所需材料</div>
      <div class="materials-info">
        <div class="info-l ">
          <div 
            class="materials-li"
            v-for="(item, index) in materialsList"
            :key="index"
          >
            <div v-if="item.title" class="mar-t40">
                <div class="li-name flex-a" >
                    <div class="name-line mar-r14"></div>
                    <div>{{ item.title }}</div>
                </div>
                <div class="pad-l40">
                  <div class="mar-t20" v-html="item.content"></div>
                </div>
            </div>
            <div v-else class="mar-t50" v-html="item.content"></div>
          </div>
        </div>
        <div class="info-img">
          <el-image
            style="width: 324px;height: 324px"
            :src="getAssetsImages('block-icon2')"
          />
        </div>
      </div>
    </div>
</template>

<script setup>
/**
 * 所需材料组件
*/
import { ref, defineProps } from "vue"
import serviceApi from "@/api/modules/trademarkService.js"
const props = defineProps({
    service_id: {
        type: String,
        default: ""
    }
})
let materialsList = ref([])

const serviceMaterial = () => {
  serviceApi.serviceMaterial({
    service_id: props.service_id
  }).then(res => {
    materialsList.value = res.data
  })
}
serviceMaterial();
const getAssetsImages = (name) => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.block-tit {
  font-size: 28px;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: Medium;
  text-align: center;
  color: #202020;
}
.materials-box {
  position: relative;
  .materials-info {
    // position: relative;
    min-height: 324px;
    .info-l {
      position: relative;
      z-index: 9;
      .materials-li {
        .li-name {
            font-size: 20px;
            font-family: PingFang SC, PingFang SC-Semibold;
            font-weight: Semibold;
            text-align: left;
            color: #202020;
          .name-line {
             width: 6px;
            height: 24px;
            background: #0052d9;
          }
        }
        // .li-child {
        .child-dot {
        width: 8px;
        height: 8px;
        background: #0052d9;
        border-radius: 50%;
        }
        .child-name {
            font-size: 16px;
            font-weight: bold;
            text-align: left;
            color: #202020;
        }
        .child-tips {
            font-size: 16px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: Regular;
            text-align: left;
            color: #575966;
        }
        // }
      }
    }
    .info-img {
      position: absolute;
      right: 320px;
      top: 0;
    }
  }
}
</style>